<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <meta content="ie=edge" http-equiv="X-UA-Compatible">
    <title>nlux React Demo!</title>
    <meta content="Salmen Hichri" name="author">
    <link href="https://use.typekit.net/nny7qsb.css" rel="stylesheet">
    <script src="./require.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        requirejs.config({
            paths: {
                "@nlux/core": "/packages/@nlux/core/umd/nlux-core",
                "@nlux/react": "/packages/@nlux/react/umd/nlux-react",
                "@nlux/langchain": "/packages/@nlux/langchain/umd/langchain",
                "@nlux/langchain-react": "/packages/@nlux/langchain-react/umd/langchain-react",
                "react": "/packages/react/umd/react.development",
                "react-dom": "/packages/react-dom/umd/react-dom.development",
                "nluxEmulatorReactExample": "./index"
            }
        });
    </script>
    <link href="/packages/@nlux/themes/luna.css" rel="stylesheet">
    <script defer type="text/javascript">
        const applyRandomBodyBackgroundColor = () => {
            // Generate a random RGB color where each value is between 230-255
            const r = Math.floor(Math.random() * 26) + 230;
            const g = Math.floor(Math.random() * 26) + 230;
            const b = Math.floor(Math.random() * 26) + 230;

            // Set the background color of the body
            document.body.style.backgroundColor = Math.random() > 0.5 ? `rgb(${255 - r}, ${255 - g}, ${255 - b})` : `rgb(${r}, ${g}, ${b})`;
        };

        document.addEventListener('DOMContentLoaded', () => applyRandomBodyBackgroundColor());
        document.addEventListener('DOMContentLoaded', () => {
            requirejs(['nluxEmulatorReactExample'], function (nluxEmulatorReactExample) {
                nluxEmulatorReactExample();
            });
        });
    </script>
    <style>
        html, body {
            overflow: hidden;
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }

        .chat-emulator {
            min-height: 400px;
        }
    </style>
</head>

<body>

<div class="chat-emulator" id="nlux-ai-chat-root"></div>

</body>
</html>
